<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="订单类型">
        <el-select v-model="formInline.orderTypes" placeholder="请选择订单类型">
          <el-option label="实时叫车" :value="1"></el-option>
          <el-option label="预约叫车" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input v-model="formInline.orderNumber"></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="formInline.orderStatus" placeholder="请选择订单状态">
          <el-option label="已完成" :value="1"></el-option>
          <el-option label="待接单" :value="2"></el-option>
          <el-option label="进行中" :value="3"></el-option>
          <el-option label="未接单" :value="4"></el-option>
          <el-option label="取消订单" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="订单开始时间">
        <el-date-picker
            v-model="formInline.date1"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间">
        </el-date-picker>
        -
        <el-date-picker
            v-model="formInline.date2"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="支付状态">
        <el-radio-group v-model="formInline.paymentStatus">
          <el-radio :label="1">未支付</el-radio>
          <el-radio :label="2">已支付</el-radio>
          <el-radio :label="3">支付失败</el-radio>
          <el-radio :label="4">退款中</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage1">重置</el-button>
        <el-button type="primary" @click="findPage">查询</el-button>
      </el-form-item>
      <el-button type="primary" @click="exportExcel()">导出</el-button>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column
          fixed
          width="160px"
          prop="orderNumber"
          label="订单编号">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="orderTypes"
          label="订单类型">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.orderTypes === 1">实时叫车</el-tag>
          <el-tag type="primary" v-if="scope.row.orderTypes === 2">预约叫车</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户名称">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="userPhone"
          label="用户手机号">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="passengerPhone"
          label="乘客手机号">
      </el-table-column>
      <el-table-column
          prop="driverName"
          label="司机名称">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="driverPhone"
          label="司机手机号">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="carName"
          label="车牌号">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="startCity"
          label="订单出发点">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="pathwayoneCity"
          label="途经点1">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="pathwaytwoCity"
          label="途经点2">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="destinationCity"
          label="订单目的地">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="practicalCity"
          label="实际下车点">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="receivingTime"
          label="订单发出时间">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="appointmentTime"
          label="订单预约时间">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="arrivalTime"
          label="订单到达时间">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="mileage"
          label="订单里程">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="timeConsuming"
          label="订单耗时">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="ifDebarkation"
          label="是否提前下车">
      </el-table-column>
      <el-table-column
          width="160px"
          prop="paymentAmount"
          label="乘客总费用">
      </el-table-column>
      <el-table-column
          fixed="right"
          prop="orderStatus"
          label="订单状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.orderStatus === 1">已完成</el-tag>
          <el-tag type="primary" v-if="scope.row.orderStatus === 2">待接单</el-tag>
          <el-tag type="info"    v-if="scope.row.orderStatus === 3">进行中</el-tag>
          <el-tag type="warning" v-if="scope.row.orderStatus === 4">未接单</el-tag>
          <el-tag type="danger"  v-if="scope.row.orderStatus === 5">取消订单</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          prop="paymentStatus"
          label="支付状态">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.paymentStatus === 1">未支付</el-tag>
          <el-tag type="success" v-if="scope.row.paymentStatus === 2">已支付</el-tag>
          <el-tag type="danger" v-if="scope.row.paymentStatus === 3">支付失败</el-tag>
          <el-tag type="info" v-if="scope.row.paymentStatus === 4">退款中</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          width="160px"
          prop="paymentTime"
          label="支付时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="xq(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import * as XLSX from "xlsx";

export default {
  data() {
    return {
      car: {},
      driver: {},
      dialogVisible: false,
      NewDate: null,
      formInline: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: []
    }
  },
  methods: {
    findPage1() {
      this.formInline = {};
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findPage();
    },
    findPage() {
      axios.post(`http://localhost:9999/api-function/orders/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.formInline).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        console.log(this.tableData);
      })
    },
    xq(id){
      this.$router.push({path: '/details', query: {id: id}})
    },
    exportExcel() {
      //导出
      // 创建一个工作簿（workbook）
      const ws = XLSX.utils.json_to_sheet(this.tableData); // 将 JSON 数据转换为工作表
      const wb = XLSX.utils.book_new(); // 新建工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 将工作表添加到工作簿中

      // 导出 Excel 文件
      XLSX.writeFile(wb, '列表信息.xlsx');
    },
  },
  created() {
    this.findPage();

  }
}
</script>
<style scoped>

</style>
